<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
    <title>个人中心</title>
    <link href="css/common.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .head{
            background-image: url("img/gua/g7.png");
            height: 120px;
            background-size:100% 100%;
        }
        .head-content{
            width: 90%;
            float: right;
            margin: 10px 0px;
            height: 80px;
        }
        .head-img{
            float: left;
            width: 75px;
            line-height: 75px;
        }
        .head-img img{
            height: 60px;
            width: 60px;
            border-radius: 50%;
            vertical-align: middle;
        }
        .head-info{
            float: left;
            color: #ebf9ff;
        }
        .head-info div{
            margin: 10px 0px;
        }
        .game-board
        {
            width: 100%;
            height: 220px;
            display: grid;
            grid-template: repeat(2, 1fr) / repeat(3, 1fr);
        }
        .box
        {
            border: 1px solid #eee;
            display: flex;
            background: #fff;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .game-board2{
            width: 100%;
            height: 110px;
            display: grid;
            grid-template: repeat(1, 1fr) / repeat(3, 1fr);
        }
        .box a{
            color: inherit;
            text-decoration: none;
        }
        .box img{
            width: 32px;
            height: 25px;
            padding-bottom: 5px;
        }
        .more-menu{
            background: #f5f5f5;
            width: 100%;
            position: absolute;
            bottom: 0px;
            z-index: 100;
            text-align: center;
            border-top: 2px solid #ececec;
        }
        .menu-li{
            background: #fff;
            padding: 12px 0px;
            margin: 2px 0px;
        }
        .cancel-btn{
            background: #fff;
            padding: 12px 0px;
            color: red;
        }

    </style>
</head>
<body>
<div class="head">
    <div class="head-content">
        <div class="head-img"><img id="userPic" src="img/gua/g1.jpg"></div>
        <div class="head-info">
            <div><span id="nickName">-</span></div>
            <div>账户余额：<span id="money">-</span>元</div>
        </div>
    </div>
</div>


<div class="game-board">
    <div class="box">
       <a id="recharge">
           <div><img src="img/gua/my1.png"></div>
           <div>批量购买</div>
       </a>
    </div>
    <div class="box">
        <a id="withdraw">
            <div><img src="img/gua/my2.png"></div>
            <div>奖金提现</div>
        </a>
    </div>
    <div class="box">
        <a href="guaTransfer.html">
            <div><img src="img/gua/my3.png"></div>
            <div>权益转赠</div>
        </a>
    </div>
    <div class="box">
        <a href="accountDetail.html">
            <div><img src="img/gua/my4.png"></div>
            <div>资金明细</div>
        </a>
    </div>
    <div class="box">
        <a href="guaMyOrder.html">
            <div><img src="img/gua/my5.png"></div>
            <div>订单明细</div>
        </a>
    </div>
    <div class="box">
        <a href="guaUserInfo.html">
            <div><img src="img/gua/my6.png"></div>
            <div>个人信息</div>
        </a>
    </div>
</div>

<div style="height: 10px"></div>

<div class="game-board2">
    <div class="box">
        <a href="guaRewardNotice.html">
            <div><img src="img/gua/my7.png"></div>
            <div>大奖公告</div>
        </a>
    </div>
    <div class="box">
        <a href="guaLoginStatus.html">
            <div><img src="img/gua/my8.png"></div>
            <div>联机退出</div>
        </a>
    </div>
    <div class="box">
        <a onclick="openMore()">
            <div><img src="img/gua/my9.png"></div>
            <div>更多</div>
        </a>
    </div>
</div>

<div class="more-menu" id="moreMenu" style="display: none">
    <div class="menu-li" onclick="gotoPage(this)" data-url="shopMap.html">站点查询</div>
    <div class="menu-li" onclick="gotoPage(this)" data-url="wzlh5/views/myBank.html">我的银行卡</div>
    <div style="height: 10px"></div>
    <div class="cancel-btn" onclick="closeMenu()">取消</div>
</div>


<!--底部栏 start-->
<div style="height: 44px"></div>
<div class="footer" style="display: none">
    <div class="footer-item fl-left" onclick="gotoPage(this)" data-url="guaHall.html"><i class="fa fa-home"></i>首页</div>
    <div class="g-center">
        <div class="footer-item center-item" onclick="gotoPage(this)" data-url="guaHall.html"><i class="fa fa-gamepad"></i>大厅</div>
    </div>

    <div class="footer-item fl-right" onclick="gotoPage(this)" data-url="myAccount.html"><i class="fa fa-user active"></i>我的</div>
</div>
<!--底部栏 end-->


<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>

<script type="application/javascript">
    var phoneNum;
    $(function () {
        getopenid();
        opendIdLogin();
    });

    //刷新金额
    $("#accountFresh").on("click",function () {
        opendIdLogin();
    });
    //充值;
    $("#recharge").on("click",function () {
        if(!phoneNum){
            window.location.href = "bindPhone.html?_path=guaRecharge.html";
            return;
        }
        window.location.href = "guaRecharge.html";
    });
    //提现
    $("#withdraw").on("click",function () {
        window.location.href = "guaWithdraw.html";
    });

    var openid;
    function getopenid() {
        openid = window.localStorage.getItem("openid");
        if(openid == null || openid == undefined || openid == '') {
            getCode();
        }
    }
    function getCode() {
        var code = Common.queryGetParam('code');
        if(code == null || code == undefined || code == '') {
            location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx95bdc635798fcfe4&redirect_uri="+window.location.href+"&response_type=code&scope=snsapi_base#wechat_redirect";
            return;
        }
        var paramStr = {};
        paramStr.code = code;
        var params = {};
        params.paramStr = JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/common/getWxUserOpenId", params, function(data) {
            openid = data.openid;
            window.localStorage.setItem("openid", data.openid);
        },false);
    }

    function opendIdLogin() {
        var paramStr = {};
        paramStr.wxOpenId = openid;
        var params = {};
        params.paramStr = JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/login/wxOpenIdLoginOrRegister", params, function(data) {
            $("#nickName").text(data.nickName);
            $("#money").text(data.money);
            $("#userPic").attr("src",data.headImg);
            $.cookie("userId",data.userId,{expires:7,path:"/"});
            $.cookie("token",data.token,{expires:7,path:"/"});
            if(data.phoneNum){
                phoneNum = data.phoneNum;
                window.localStorage.setItem("phoneNum", data.phoneNum);
            }

            console.log(data);
        },false);
    }

    function gotoPage(me) {
        var pageurl = $(me).attr("data-url");
        window.location.href=pageurl;
    }

    function openMore() {
        $("#moreMenu").slideDown(400);//从底部显示
    }
    function closeMenu() {
        $("#moreMenu").slideUp(400);//往底部隐藏
    }
</script>
</body>
</html>